/**
 * Created by Administrator on 2017/10/10.
 */
import React from "react";
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import {Icon,Tabs,SearchBar } from "antd-mobile";
import styles from '../index.less';

const TabPane = Tabs.TabPane;

class index extends React.Component{
  constructor(props) {
    super(props);
    this.state = {

    };
  }

  callback = (key) =>{
    console.log('callback', key);
  };

  handleTabClick = (key) =>{
    console.log('callback', key);
  };
  onClick = () =>{
    this.props.dispatch(
      routerRedux.push({
        pathname: `/study/interlocution/details`
      })
    );
  };
  goAdd = () =>{
    this.props.dispatch(
      routerRedux.push({
        pathname: `/study/interlocution/add`
      })
    );
  };
  render(){
    const arr = ['党的地位和作用','党的性质和宗旨','党的指导思想','党的纲领','中共特色社会主义','党的领导','申请入党条件'];
    return(
      <div className="interlocution"  style={{backgroundColor:"white"}}>
        <Tabs defaultActiveKey="1" swipeable={false} onChange={this.callback} onTabClick={this.handleTabClick}>
          <TabPane tab={<div>最新问题</div>} key="1">
            <div style={{ display: 'flex',flexWrap:'wrap',backgroundColor: '#EEEEEE' ,paddingTop:'0.9rem'}}>
              <div style={{width: '100%'}}>
                <SearchBar placeholder="搜索"/>
              </div>  
              {
                arr.map((i,key)=>{
                  return(
                    <div style={{ display: 'flex',flexDirection:'column ',width:'100%',marginTop:'0.25rem',backgroundColor: 'white',padding:'0.2rem'}} onClick={()=>this.onClick()}>
                      <div style={{ display: 'flex',lineHeight:'0.8rem'}}>
                        <div style={{width:'15%',height:'0.8rem'}}> </div>
                        <div style={{width:'85%',color:'#6E6E6E',fontSize:'0.24rem'}}>张建国</div>
                      </div>
                      <div style={{color:'#3B3B3B',margin:'0.2rem 0',fontSize:'0.36rem',fontWeight:800}}>支委会的组织委员能兼任纪检委员吗？</div>
                      {/*style={{lineHeight:'1.3',letterSpacing:'0.02rem',color:"#434343",display:"-webkit-box"}}*/}
                      <div className="text" >
                        万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言（标准通用标记语言下的一个应用）、可扩展标记语言（标准通用标记语言下的一个子集）以及帮助残障人士有效获得Web内容的信息无障碍指南（WCAG）等，
                      </div>
                      <div style={{display:'flex',marginTop:'0.2rem',fontSize:'0.3rem',color:"#B3B3B3"}}>
                        <div style={{width:'30%'}}>1位专家解答</div>
                        <div style={{width:'70%'}}>234次浏览</div>
                      </div>
                    </div>
                  )
                })
              }
            </div>
          </TabPane>
          <TabPane tab={<div>最热问题</div>} key="2">
            <div style={{ display: 'flex',flexWrap:'wrap',justifyContent: 'center',backgroundColor: '#EEEEEE' ,paddingTop:'0.9rem'}}>
              <div style={{width: '100%'}}>
                <SearchBar placeholder="搜索"/>
              </div>  
              {
                arr.map((i,key)=>{
                  return(
                    <div style={{ display: 'flex',flexDirection:'column ',width:'100%',marginTop:'0.25rem',backgroundColor: 'white',padding:'0.2rem'}} onClick={()=>this.onClick()}>
                      <div style={{ display: 'flex',lineHeight:'0.8rem'}}>
                        <div style={{width:'15%',height:'0.8rem'}}> </div>
                        <div style={{width:'85%',color:'#6E6E6E',fontSize:'0.24rem'}}>张建国</div>
                      </div>
                      <div style={{color:'#3B3B3B',margin:'0.2rem 0',fontSize:'0.36rem',fontWeight:800}}>支委会的组织委员能兼任纪检委员吗？</div>
                      {/*style={{lineHeight:'1.3',letterSpacing:'0.02rem',color:"#434343",display:"-webkit-box"}}*/}
                      <div className="text" >
                        万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言（标准通用标记语言下的一个应用）、可扩展标记语言（标准通用标记语言下的一个子集）以及帮助残障人士有效获得Web内容的信息无障碍指南（WCAG）等，
                      </div>
                      <div style={{display:'flex',marginTop:'0.2rem',fontSize:'0.3rem',color:"#B3B3B3"}}>
                        <div style={{width:'30%'}}>1位专家解答</div>
                        <div style={{width:'70%'}}>234次浏览</div>
                      </div>
                    </div>
                  )
                })
              }
            </div>
          </TabPane>
        </Tabs>
        <div style={{position:'fixed',width:'90%',bottom:'0.3rem',zIndex:999}}>
          <div style={{width:'1rem',height:'1rem',backgroundColor:'#ff0000',borderRadius:'50%',
            textAlign: 'center', lineHeight: '1.1rem',fload:'right' ,float:'right',
            boxShadow:'0 0 0.15rem'}} onClick={this.goAdd}>
            <Icon type={require('../../../svgs/Study/write.svg')} />
          </div>
        </div>
      </div>
    )
  }
}
function mapStateToProps({personCenter, personLayout}){
  return {personCenter, personLayout};
}
export default connect(mapStateToProps)(index);
